// * 1. children:如果组件下有子节点（任意值），props对象中就会有children
// * 2. props传值校验和默认值

import React, { Component } from 'react'
// 导入类型校验库
import PropTypes from 'prop-types'
class Child extends Component {
    render() {
        console.log(this.props.children)
        return (
            <>
                <h2>类子组件</h2>
                {this.props.children}
                <button onClick={() => { this.props.children(16978) }}>调用插槽方法</button>
            </>
        )
    }
}
// 函数组件
const Fnc = (props) => {
    console.log(props)
    return (
        <div>
            <h2>函数组件</h2>
        </div>
    )
}
// 封装组件
/**
 * 渲染颜色列表
 * @param {*} props 接收颜色值数组并渲染
 */
const Colors = (props) => {
    const { colors, a } = props
    return (
        <div>
            <ul>
                {
                    colors.map((item) => <li style={{ backgroundColor: item, color: '#fff' }} key={item}>{item}</li>)
                }
            </ul>
            <p>{a}</p>
        </div>
    )
}
Colors.defaultProps = {
    a: 0
}
// 类型校验
Colors.propTypes = {
    colors: PropTypes.array.isRequired,
    // obj:PropTypes.object
    obj: PropTypes.shape({
        a: PropTypes.string,
        b: PropTypes.bool
    })

}
// 类组件
class Colored extends Component {

    // 2. 校验
    static propTypes = {
        a: PropTypes.func.isRequired,
        b: PropTypes.array.isRequired,
        c: PropTypes.number
    }
    // 设置默认值
    static defaultProps = {
        b: []
    }
    render() {
        return (
            <div>
                <p>封装的类组件</p>
                <h1>{this.props.c}</h1>
            </div>
        )
    }
}
// 父组件
class Index extends Component {
    state = {
        colors: ['red', 'blue', 'orange']
        // colors: 123

    }
    render() {
        return (
            <div>
                <h2>props高级</h2>
                <Colors colors={this.state.colors} />
                <hr />
                <Child>

                    {
                        (d) => {
                            console.log(d)
                        }
                    }
                </Child>
                <hr />
                <Fnc>789</Fnc>
            </div>
        )
    }
}
export default Index